
window.onload = async function () {
  if (!getCookie("username")) {
    location.href = '../login.html'
  }

  const tbody = document.querySelector('tbody')
  const add = document.querySelector('.maskAdd1')
  const add1 = document.querySelector('.maskAdd2')

  const headAdd = document.querySelector('.header .add')
  const aaxx = document.querySelector('.aa .xx')
  const qx = document.querySelector('.ipt .qx')

  // 添加页面的标签获取
  const qd = document.querySelector('.qd')
  const addUsername = document.querySelector('.maskAdd1 .ipt [name="username"]')
  const addPassword = document.querySelector('.maskAdd1 .ipt [name="password"]')
  const addEmail = document.querySelector('.maskAdd1 .ipt [name="email"]')
  const addTel = document.querySelector('.maskAdd1 .ipt [name="tel"]')
  const addSex = document.querySelectorAll('.maskAdd1 .ipt [name="sex"]')

  // 编辑
  const mkxx = document.querySelector('.maskAdd2 .aa .xx')
  const mkqx = document.querySelector('.maskAdd2 .qx')
  const mkqd = document.querySelector('.maskAdd2 .bjqd')

  const bjUsername = document.querySelector('.maskAdd2 .ipt [name="username"]')
  const bjPassword = document.querySelector('.maskAdd2 .ipt [name="password"]')
  const bjEmail = document.querySelector('.maskAdd2 .ipt [name="email"]')
  const bjTel = document.querySelector('.maskAdd2 .ipt [name="tel"]')
  const bjSex = document.querySelectorAll('.maskAdd2 .ipt [name="sex"]')
  //请求渲染页面
  let arr = null
  setPage();


  headAdd.addEventListener('click', () => {
    add.style.display = 'block'
  })
  // 添加请求
  qd.addEventListener('click', () => {

    let name = addUsername.value
    let pass = addPassword.value
    let email = addEmail.value
    let tel = addTel.value
    let sex;

    for (let i = 0; i <= addSex.length - 1; i++) {
      if (addSex[i].checked) {
        sex = addSex[i].value;
        break;
      }
    }
    if (!name || !pass || !email || !tel || !sex) {
      popup.msg('数据不可以为空！')
      return
    }
    let reg = /^[a-zA-Z0-9_]{4,10}$/
    if (!reg.test(name)) {
      popup.msg('用户名数字/字母/下划线4-10位！')
      return
    }
    let reg1 = /^\d{6}$/
    if (!reg.test(pass)) {
      popup.msg('密码六位数字！')
      return
    }
    var reg2 = /(^[1-9]\d{4,9}@qq\.com$)|(^[a-zA-Z]\w{5,17}@(((126|163)\.com)|(yeah\.net))$)/
    if (!reg2.test(email)) {
      popup.msg('邮箱不正确！')
      return false
    }
    var reg3 = /^1[345789]\d{9}$/
    if (!reg3.test(tel)) {
      popup.msg('手机号不正确！')
      return false
    }

    request({
      url: '/add',
      method: 'post',
      data: {
        username: name,
        password: pass,
        email: email,
        tel: tel,
        sex: sex
      }
    }).then(res => {
      console.log(res)
      if (res.error_code === 405) {
        popup.msg(res.msg)
        addUsername.value = ''
        addPassword.value = ''
        addEmail.value = ''
        addTel.value = ''
      }
      if (res.error_code === 200) {
        console.log(res)
        popup.msg(res.msg)

        add.style.display = 'none'
        setPage()
        addUsername.value = ''
        addPassword.value = ''
        addEmail.value = ''
        addTel.value = ''
      }
    })

  })
  aaxx.addEventListener('click', () => {
    add.style.display = 'none'
  })
  qx.addEventListener('click', () => {
    add.style.display = 'none'
  })
  mkxx.addEventListener('click', () => {
    add1.style.display = 'none'
  })
  mkqx.addEventListener('click', () => {
    add1.style.display = 'none'
  })
  // 删除
  tbody.addEventListener('click', (event) => {
    let target = event.target
    console.log(target)
    if (target.getAttribute('name') === 'del') {
      popup.confirm('你真的要删除吗？', () => {
        let index = target.getAttribute('index')
        request({
          url: '/del',
          method: 'post',
          data: {
            index: index
          }
        }).then(res => {
          popup.close()
          setPage();

        })
      })

      // 点击编辑获取当前数据
    } else if (target.getAttribute('name') === 'bj') {
      add1.style.display = 'block'
      let index = target.getAttribute('index')
      mkqd.setAttribute('index', index)
      request({
        url: '/getChange',
        method: 'post',
        data: {
          index: index
        }
      }).then(res => {
        bjUsername.value = res.data.username
        bjPassword.value = res.data.password
        bjEmail.value = res.data.email
        bjTel.value = res.data.tel
        for (let i = 0; i <= bjSex.length - 1; i++) {
          if (res.data.sex === bjSex[i].value) {
            bjSex[i].checked = true;
            break;
          }
        }
      })
    }
  })
  // 编辑确定按钮
  mkqd.addEventListener('click', () => {
    let index = mkqd.getAttribute('index')
    let name = bjUsername.value
    let pass = bjPassword.value
    let email = bjEmail.value
    let tel = bjTel.value
    let sex;

    for (let i = 0; i <= bjSex.length - 1; i++) {
      if (bjSex[i].checked) {
        sex = bjSex[i].value;
        break;
      }
    }

    if (!name || !pass || !email || !tel || !sex) {
      popup.msg('数据不可以为空！')
      return
    }
    let reg = /^[a-zA-Z0-9_]{4,10}$/
    if (!reg.test(name)) {
      popup.msg('用户名数字/字母/下划线4-10位！')
      return
    }
    let reg1 = /^\d{6}$/
    if (!reg.test(pass)) {
      popup.msg('密码六位数字！')
      return
    }
    var reg2 = /(^[1-9]\d{4,9}@qq\.com$)|(^[a-zA-Z]\w{5,17}@(((126|163)\.com)|(yeah\.net))$)/
    if (!reg2.test(email)) {
      popup.msg('邮箱不正确！')
      return false
    }
    var reg3 = /^1[345789]\d{9}$/
    if (!reg3.test(tel)) {
      popup.msg('手机号不正确！')
      return false
    }
    request({
      url: '/change',
      method: 'post',
      data: {
        index: index,
        username: name,
        password: pass,
        email: email,
        tel: tel,
        sex: sex,
      }
    }).then(res => {
      if (res.error_code === 200) {
        popup.msg(res.msg)
        add1.style.display = 'none'
        setPage()
      }
    })
  })


}

function setPage() {
  const tbody = document.querySelector('tbody')

  request({
    url: '/getAll',
  }).then(res => {
    if (res.error_code === 402) {
      let tr = document.createElement('tr')
      tr.innerText = '您没有用户的数据！'
      tr.style.fontSize = '20px'
      tr.style.textAlign = 'center'

      tbody.appendChild(tr)
    }
    if (res.error_code === 200) {
      arr = res.data
      let str = '';
      res.data.forEach((item, index) => {
        let bool = item.sex === '女' || item.sex === '保密'
        str += `
          <tr>
            <td>${item.id}</td>
            <td>${item.username}</td>
            <td>${item.tel}</td>
            <td>${item.email}</td>
            <td><span class="sex" ${bool ? "style=background-color:#f6ffed;color:#389e0d;border-color:#c0ed9d" : "style=background-color= #fff1f0;color:#d2232b;border-color:#ffa7a2"}>${item.sex}</span></td>
            <td><span class="dis">禁用</span></td>
            <td class="btn">
              <button index=${index} name='bj'>编辑</button>
              <button index=${index} name='del'>删除</button>
            </td>
        </tr>
        `
      })
      tbody.innerHTML = str;

    }
  })
}


